import { OneModal, TagSelect } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Col, Form, Input, message, Row, Select, Spin } from 'antd';
import { Ref, useContext, useEffect, useRef } from 'react';
import { ConditionManageAPI } from '../common/type';
import pageStyles from '@/common/pageLayout.less';
import { ConditionManageContext } from '../mconfig';
import { addConditionService, editConditionService } from '../services';

export const UpdateConditionModal: React.FC<
  ConditionManageAPI.IUpdateConditionModal
> = ({ onClose, visible, checkRowObj }) => {
  /**
   * modal ref
   */
  const updateTableRef: Ref<IOneModalRef> = useRef(null);

  /**
   * 表单 form
   */
  const [updateTableForm] = Form.useForm();

  /**
   * 关闭弹窗
   */
  const onCloseModal = () => {
    if (updateTableRef) {
      if (updateTableRef.current) {
        if (updateTableRef.current.onModalCancel) {
          updateTableRef.current.onModalCancel();
        }
      }
    }
  };

  /**
   * 获取上下文
   */
  const {
    typeSelectRow,
    rightTableProps: { reloadTableData },
  } = useContext(ConditionManageContext);

  useEffect(() => {
    if (checkRowObj && checkRowObj?.id) {
      updateTableForm?.setFieldsValue({
        ...checkRowObj,
      });
    }
  }, [checkRowObj]);

  /**
   * 新增编辑接口回调
   */
  const updateCallback = (res: any) => {
    if (res && res?.msgFlag) {
      message.success(res?.msg);
      onCloseModal();
      reloadTableData();
    } else {
      message.error(res?.msg);
    }
  };

  /**
   * 引入添加
   */
  const { addConditionLoading, addConditionRun } =
    addConditionService(updateCallback);

  /**
   * 引入编辑
   */
  const { editConditionLoading, editConditionRun } =
    editConditionService(updateCallback);

  /**
   * 保存
   */
  const saveOnOk = () => {
    updateTableForm?.validateFields()?.then((values: any) => {
      if (checkRowObj && checkRowObj?.id) {
        let editParams = {
          ...values,
          orderType: typeSelectRow?.orderType,
          id: checkRowObj?.id,
          versionNum: checkRowObj?.versionNum,
        };
        editConditionRun(editParams);
      } else {
        let addParams = {
          ...values,
          orderType: typeSelectRow?.orderType,
        };
        addConditionRun(addParams);
      }
    });
  };

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={updateTableRef}
        title={checkRowObj && checkRowObj?.id ? '编辑流程条件' : '添加流程条件'}
        width={document.body.clientWidth * 0.3}
        onCancel={onClose}
        bodyStyle={{
          padding: '5px 0px',
        }}
        centered
        confirmLoading={addConditionLoading || editConditionLoading}
        onOk={saveOnOk}
      >
        <Spin spinning={addConditionLoading || editConditionLoading}>
          <div className={pageStyles['fromView-styles']}>
            <Form labelAlign="right" form={updateTableForm}>
              <Row>
                <Col span={24}>
                  <Form.Item
                    label={'表名'}
                    name="tableName"
                    rules={[
                      {
                        required: true,
                        message: '请输入表名',
                      },
                      {
                        pattern: /^[A-Za-z_]+$/,
                        message: '只能输入英文字母和下划线',
                      },
                    ]}
                    initialValue={typeSelectRow?.tableName}
                  >
                    <Input allowClear placeholder="请输入表名" disabled />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label={'表字段'}
                    name="field"
                    rules={[
                      {
                        required: true,
                        message: '请输入表字段',
                      },
                      {
                        pattern: /^[A-Za-z_]+$/,
                        message: '只能输入英文字母和下划线',
                      },
                    ]}
                  >
                    <Input allowClear placeholder="请输入表字段" />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label={'字段名称'}
                    name="fieldName"
                    rules={[
                      {
                        required: true,
                        message: '请输入字段名称',
                      },
                    ]}
                  >
                    <Input allowClear placeholder="请输入字段名称" />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label={'字段类别'}
                    name="fieldType"
                    rules={[
                      {
                        required: true,
                        message: '请选择字段类别',
                      },
                    ]}
                  >
                    <Select placeholder="请选择字段类别" allowClear>
                      <Select.Option value={0} key={0}>
                        数字
                      </Select.Option>
                      <Select.Option value={1} key={1}>
                        字符
                      </Select.Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label={'执行方式'}
                    name="isAuto"
                    rules={[
                      {
                        required: true,
                        message: '请选择执行方式',
                      },
                    ]}
                  >
                    <Select placeholder="请选择执行方式" allowClear>
                      <Select.Option value={0} key={0}>
                        系统办理
                      </Select.Option>
                      <Select.Option value={1} key={1}>
                        人工办理
                      </Select.Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label={'条件归类'}
                    name="category"
                    rules={[
                      {
                        required: true,
                        message: '请选择条件归类',
                      },
                    ]}
                  >
                    <Select placeholder="请选择条件归类" allowClear>
                      <Select.Option value={0} key={0}>
                        条件设置
                      </Select.Option>
                      <Select.Option value={1} key={1}>
                        业务变更
                      </Select.Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label={'状态类型'} name="stateType">
                    <Select placeholder="请选择状态类型" allowClear>
                      <TagSelect.Option
                        value={typeSelectRow?.checkType}
                        key={typeSelectRow?.checkType}
                      >
                        审核状态
                      </TagSelect.Option>
                      <TagSelect.Option
                        value={typeSelectRow?.stateType}
                        key={typeSelectRow?.stateType}
                      >
                        业务状态
                      </TagSelect.Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label={'是否使用'} name="isOpen" initialValue={1}>
                    <Select placeholder="请选择是否使用" allowClear>
                      <Select.Option value={0} key={0}>
                        否
                      </Select.Option>
                      <Select.Option value={1} key={1}>
                        是
                      </Select.Option>
                    </Select>
                  </Form.Item>
                </Col>

                <Col span={24}>
                  <Form.Item label="备注" name="remark">
                    <Input.TextArea
                      placeholder={`请输入备注`}
                      showCount
                      maxLength={200}
                      autoSize={{ minRows: 2, maxRows: 4 }}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </div>
        </Spin>
      </OneModal>
    </>
  );
};
